<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Users List</title>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type='text/javascript'>
	$(function(){
		var $userForm = $('#userForm');
		$('.deleteUser').click(function(){
			alert('clicked');
			var id = this.id;
			alert(id);
			var $that = $(this);
			
			$.ajax({
				url: '/users',
				type: 'DELETE',
				dataType: 'json',
				data: JSON.stringify({'key':id}),
				success: function(data,textStatus,jqXHR){
					alert('delete successful: '+textStatus);
					$that.parent().parent().hide();
				},
				error: function(jqXHR,textStatus,errorThrown){
					alert('error: '+textStatus);
				}
			});
		});
	});
	</script>
  </head>
  <body>

  <div style="width: 100%;">
    <div class="topLine">
      <div style="float: left;"><img src="images/todo.gif" /></div>
      <div style="float: left;" class="headline">Users</div>
    </div>
  </div>

<div style="clear: both;"/>  

{# Check if we have any todoUsers, only in this case render the table #}

{% if numberTodoUsers %}
 
You have a total number of {{numberTodoUsers}} Users. 

<table>
  <tr>
      <th></th>
      <th>name</th>
      <th>id</th>
      <th>password</th>
    </tr>
{% for toDoUser in todoUsers %}
<tr> 
<td>
</td>
<td>
{{toDoUser.userName}}
</td>
<td>
{{toDoUser.id}}
</td>
<td>
{{toDoUser.pwd}}
</td>
<td>
</td>
<td>
</td>
<td>
<div class='deleteUser' id='{{toDoUser.key().id()}}'>delete</div>
</td>
</tr> 
{% endfor %}
</table>

{% endif %}


<hr />
<form id='userForm' name='userForm'>
	<input id='userName' type='hidden' name='userName' value=''/>
	<input id='userId' type='hidden' name='userId' value=''/>
	<input id='pwd' type='hidden' name='pwd' value=''/>
	<input id='key' type='hidden' name='key' value=''/>
</form>
</body>
</html>